<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="layout" content="portalForAppTemplate"/>
    <title>免费评房</title>
    <style>

    </style>
</head>

<body>
<nav class="nav">
    <span id="createStep1Btn" ><</span>
    %{--<g:link controller="portalForApp" action="create2Step2" params="[contactId:this.contactId,projectName:this.projectName2,city:this.house?.city?.id,district:this.house.district]"><</g:link>--}%
    填写押品信息
</nav>
<header class="create-header">
        <ul class="creat-flowList flex-box">
            <li data-id="01" class="flex1 active">
                <span></span>

                <h3>小区信息</h3>
            </li>
            <li data-id="02" class="flex1 active">
                <span></span>

                <h3>押品信息</h3>
            </li>
            <li data-id="03" class="flex1">
                <span></span>

                <h3>极速询值</h3>
            </li>
        </ul>
</header>

<form action="create2Step2" id="Create2Form1" method="post" class="Create2Form1">
    <input type="hidden" value="${this.contactId}" name="contactId" style="display: none"/>
    <input type="hidden" value="${this.projectName2}" name="projectName" style="display: none"/>
    <input type="hidden" value="${this.house?.city?.id}" name="city" style="display: none"/>
    <input type="hidden" value="${this.house.district}" name="district" style="display: none"/>
</form>
<form resource="${this.id}" action="create2Step4Save" id="Create2Form3" method="post" class="Create2Form3">
    <input type="hidden" id="city" name="city" value="${this.house?.city?.id}"/>
    <input type="hidden" id="district" name="district" value="${this.house?.district}"/>
    <input type="hidden" name="contactId" value="${this.contactId}"/>
    <input type="hidden" id="status" name="status" value=""/>
    %{--<input type="hidden" id="externalId" name="externalId" value=""/>--}%
    <input type="hidden" id="unitPrice" name="unitPrice" value=""/>
    <div class="bgcWhite Create weui_cells weui_cells_form b-margin">
        <div class="weui_cell">
            <div class="weui_cell_hd money"><label class="weui_label">贷款金额</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:field class="weui_input" type="number" id="appliedTotalPrice" name="appliedTotalPrice" value="${this.house?.appliedTotalPrice}" placeholder="例如：400万"/>
            </div>
        </div>
    </div>
    <div class="bgcWhite Create weui_cells weui_cells_form">

        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">所在小区</label></div>
            <g:if test="${this.house?.projectName}">
                <div class="weui_cell_bd weui_cell_primary">
                    <g:textField class="weui_input" type="text" id="projectName" name="projectName" value="${this.house?.projectName}" readonly="readonly"/>
                </div>
            </g:if>
            <g:else>
                <div class="weui_cell_bd weui_cell_primary">
                    <g:textField class="weui_input" type="text" id="projectName" name="projectName" value=""  autofocus="autofocus"/>
                </div>
            </g:else>
        </div>

        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">楼栋信息</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:textField class="weui_input" type="number" id="building" name="building" value="${this.house?.building}" placeholder="如：5"/>
            </div>
        </div>

        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">单元信息</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:textField class="weui_input" type="number" id="unit" name="unit" value="${this.house?.unit}" placeholder="如：5"/>
            </div>
        </div>
    </div>

    <div class="bgcWhite Create weui_cells weui_cells_form sepLine">
        <div class="weui_cell">
            <div class="weui_cell_hd">
                <label class="weui_label">楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;层</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <input style="width: 70px;text-align: center" id="floor" name="floor" class="weui_input" type="number" value="${this.house?.floor}" placeholder="所在楼层">
                <span style="color: #4a4a4a">/</span>
                <input style="width: 70px;text-align: center" id="totalFloor" name="totalFloor" class="weui_input" type="number" value="${this.house?.totalFloor}" placeholder="总楼层">
            </div>
        </div>

        <div class="weui_cell">
            <div class="weui_cell_hd"><label
                    class="weui_label">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:textField class="weui_input" type="text" id="roomNumber" name="roomNumber"
                             value="${this.house?.roomNumber}" placeholder="如：201" />
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">住宅面积</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:field class="weui_input" type="number" name="area" id="area" value="${this.house?.area}" placeholder="如：110(平米)"/>
            </div>


        </div>

        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">房本地址</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:field class="weui_input" type="text" name="address" id="address" value="${this.house?.address}" placeholder="请填写房产证地址"/>
            </div>
        </div>
    </div>
    <div class="bgcWhite Create weui_cells weui_cells_form sepLine">

        <div class="weui_cell weui_cell_select pl-15">
            <div class="weui_cell_hd"><label
                    class="weui_label">朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:select class="weui_select" name="orientation" noSelection="${['':'请选择']}"
                          from="${["东", "南", "西", "北", "东西", "南北", "东南", "东北", "西南", "西北"]}"
                          valueMessagePrefix="orientation" value="${this.house?.orientation}"/>
            </div>
        </div>

        <div class="weui_cell weui_cell_select pl-15">
            <div class="weui_cell_hd"><label class="weui_label">规划用途</label></div>

            <div class="weui_cell_bd weui_cell_primary">

                <g:select class="weui_select" noSelection="${['':'请选择']}" name="houseType" id="houseType" from="${this.houseTypeList}" value="${this.house?.houseType}"/>
            </div>
        </div>

        <div class="weui_cell weui_cell_select pl-15">
            <div class="weui_cell_hd"><label class="weui_label">押品性质</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:select class="weui_select" noSelection="${['':'请选择']}" name="assetType" id="assetType" from="${this.assetTypeList}" value="${this.house?.assetType}"/>
            </div>
        </div>

        <div class="weui_cell weui_cell_select pl-15">
            <div class="weui_cell_hd"><label class="weui_label">特殊因素</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:select class="weui_select" noSelection="${['':'请选择']}" name="specialFactors" id="specialFactors" optionKey="name" optionValue="name" from="${com.next.SpecialFactors.list()}" value="${this.house?.specialFactors}"/>
            </div>
        </div>

        <div class="weui_cell hide" id="fAtticArea">
            <div class="weui_cell_hd"><label class="label weui_label">阁楼（跃层）面积</label></div>

            <div class="weui_cell_bd weui_cell_primary">
                <g:field class="weui_input" type="number" name="atticArea" id="atticArea" value="${this.house?.atticArea}" placeholder="如：110"/>
            </div>

            <div class="weui_cell_hd"><label class="weui_label" style="margin-right: 0">（m<sup>2</sup>）</label></div>
        </div>
    </div>

    <div class="bigBtn">
        <button type="button" class="linkBtn weui_btn weui_btn_plain_default" id="createStep3Btn">下一步</button>
    </div>
</form>

%{--<div class="client-hotline2">--}%
    %{--<a href="tel:${com.next.ContactLoginCertificate.findByExternalId(openId)?.contact?.city?.telephone}" class="hotline">--}%
        %{--<g:img class="hotlineIcon" dir="images" file="hotline-icon.png"/>--}%
        %{--<span class="city-hotline">${com.next.ContactLoginCertificate.findByExternalId(openId)?.contact?.city?.telephone}</span>--}%
    %{--</a>--}%
%{--</div>--}%


%{--提示信息和验证--}%
<div class="message-box">
    <div class="helpMsg hide"></div>
    <g:if test="${flash.message}">
        <div class="message" role="status">
            ${flash.message}
        </div>
    </g:if>
</div>

<g:javascript>
    $(function () {
        $("#appliedTotalPrice").val("");
        $("#building").val("");
        $("#unit").val("");
        $("#area").val("");
        $("#atticArea").val("");
        $("#orientation").val("");

        var fAtticArea = $("#fAtticArea");
        var specialFactors = $("#specialFactors");
        specialFactors.change(function () {
            if (specialFactors.val() == '跃层') {
                fAtticArea.find(".label").text("跃层面积");
                fAtticArea.removeClass("hide");
            } else if (specialFactors.val() == '顶楼带阁楼') {
                fAtticArea.find(".label").text("阁楼面积");
                fAtticArea.removeClass("hide");
            } else {
                fAtticArea.addClass("hide");
            }
        });


        $("#createStep3Btn").click(function () {

            // 期望金额
            var appliedTotalPrice = $("#appliedTotalPrice").val().trim();
            if (!appliedTotalPrice) {
                helpMessage("请输入贷款金额");
                return;
            }
            if (appliedTotalPrice <= 0) {
                helpMessage("贷款金额必须大于零");
                return;
            }
            if (!(/^-?[1-9]\d*$/.test(appliedTotalPrice))) {
                helpMessage("贷款金额必须为整数");
                return;
            }

            // 所属城市
            var city = $("#city").val().trim();
            if (!city) {
                helpMessage("请输入所在城市");
                return;
            }

            // 所在区县
            var district = $("#district").val().trim();
            if (!district) {
                helpMessage("请输入所在区县");
                return;
            }

            // 所在小区
            var projectName = $("#projectName").val().trim();
            if (!projectName) {
                helpMessage("请输入所在小区");
                return;
            }

            // 楼栋信息
            var building = $("#building").val().trim();
            if (!building) {
                helpMessage("请输入楼栋信息");
                return;
            }
            if (!(/^\+?[1-9]\d*$/.test(building))) {
                helpMessage("楼栋信息为大于零的正整数");
                return;
            }

            // 单元信息
            var unit = $("#unit").val().trim();
            if (!unit) {
                $("#unit").val(0);
                unit = 0;
            }

            // 楼层信息
            var floor = $("#floor").val().trim();
            var totalFloor = $("#totalFloor").val().trim();
            if (!floor) {
                helpMessage("请输入所在楼层");
                return;
            }
            if (!(/^-?[1-9]\d*$/.test(floor))) {
                helpMessage("请输入正确的所在楼层");
                return;
            }
            if (!totalFloor) {
                helpMessage("请输入总楼层");
                return;
            }
            if (!(/^-?[1-9]\d*$/.test(totalFloor))) {
                helpMessage("请输入正确的总楼层");
                return;
            }
            if (parseInt(floor) > parseInt(totalFloor)) {
                helpMessage("所在楼层必须小于等于总楼层");
                return;
            }

            // 户号
            var roomNumber = $("#roomNumber").val().trim();
            if (!roomNumber) {
                helpMessage("请输入户号");
                return;
            }

            // 面积
            var area = $("#area").val().trim();
            if (!area) {
                helpMessage("请输入住宅面积");
                return;
            }
            if (area <= 0) {
                helpMessage("住宅面积必须大于0");
                return;
            }

            //房本地址
            var address = $("#address").val().trim();
            if (!address) {
                helpMessage("请输入房本地址");
                return;
            }

            //朝向
            var orientation = $("#orientation").val().trim();
            if (!orientation) {
                helpMessage("请输入朝向");
                return;
            }

            //物业类型
            var houseType = $("#houseType").val().trim();
            if (!houseType) {
                helpMessage("请输入物业类型");
                return;
            }

            //押品类型
            var assetType = $("#assetType").val().trim();
            if (!assetType) {
                helpMessage("请输入押品类型");
                return;
            }

            // 特殊因素
            var specialFactors = $("#specialFactors").val().trim();
            if (!specialFactors) {
                helpMessage("请输入特殊因素");
                return;
            }

            //阁楼面积
            var atticArea = $("#atticArea").val().trim();
            if (specialFactors == "跃层") {
                if (!atticArea) {
                    helpMessage("请输入跃层面积");
                    return;
                }
                if (atticArea <= 0) {
                    helpMessage("跃层面积必须大于0");
                    return;
                }
            }
            if (specialFactors == "顶楼带阁楼") {
                if (!atticArea) {
                    helpMessage("请输入阁楼面积");
                    return;
                }
                if (atticArea <= 0) {
                    helpMessage("阁楼面积必须大于0");
                    return;
                }
            }

            // 询价并提交表单
            $('#createStep3Btn').addClass("btn_disabled").attr('disabled', 'disabled');
            $.ajax({
                type: "POST",
                // url:  "/wechatOpportunity/QueryPrice",
                url:  "/portalForApp/queryPrice",
                data: {
                    city: city,
                    district: district,
                    projectName: projectName,
                    building: building,
                    unit: unit,
                    floor: floor,
                    roomNumber: roomNumber,
                    totalFloor: totalFloor,
                    area: area,
                    address: address,
                    orientation: orientation,
                    houseType: houseType,
                    specialFactors: specialFactors,
                    assetType: assetType,
                    appliedTotalPrice: appliedTotalPrice,
                    atticArea: atticArea
                },
                beforeSend:function() {
                    $(".helpMsg").html("");
                    var html= '<h4 class="msg1">评房信息已提交</h4>'+'<h5 class="msg2">系统正在评估中，请稍等 <span class="colorRed">15-30s</span>，返回评房结果</h5>';
                    $(html).appendTo($(".helpMsg"));
                    $(".helpMsg").fadeIn(200);
                },
                success: function (data) {
                    if (data.status == "success") {
                        var price = data.price
                        $("#status").val(data.collateralStatus);
                        // $("#externalId").val(price["externalId"]);
                        // $("#unitPrice").val(price["unitPrice"]);
                        $("#unitPrice").val(data.unitprice);
                        $("#Create2Form3").submit();
                    } else {
                        $("#status").val(data.collateralStatus);
                        helpMessage(data.errorMsg);
                        return;
                    }
                }
            });
        });

        setTimeout(function () {
            $(".message").fadeOut(200);
        }, 2000);

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        }
    });

    $("#createStep1Btn").click(function () {
        $("#Create2Form1").submit();
//        $(this).css("cssText", "background-color:#ccc !important;");
    });
</g:javascript>
</body>
</html>

